<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>校园一卡通管理系统</title>
    <!-- 网页在浏览器上的图标 -->
    <link type="text/html" rel="icon" href="../../../image/logo.png">
    <!-- 引入layui的css -->
    <link type="text/css" rel="stylesheet" href="../../../lib/layui/css/layui.css">
    <!-- 引入layui的js -->
    <script src="../../../lib/layui/layui.js"></script>
    <script src="../../../lib/jQuery/jquery-3.7.1.js"></script>
    <script>
        layui.use(function() {
            layui.sessionData('changePassword', {key: 'isOk', value: false});

            let layer = layui.layer;
            let form = layui.form;

            form.verify({
                'checkPassword': function(value) {
                    // return代表不满足规则
                    if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/.test(value)) {
                        // 提示信息
                        return "密码必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间";
                    }
                },
                'checkNewPassword': function(value) {
                    // 新密码不能跟原密码一样
                    let oldPassword = form.
                    val('changePasswordForm').oldPassword;
                    if (value === oldPassword) {
                        return "新密码不能与原密码一致";
                    }
                },
                'confirmPassword': function(value) {
                    // 确认密码必须要跟新密码一致
                    let newPassword = form.
                    val('changePasswordForm').newPassword;
                    if (value !== newPassword) {
                        return "确认密码与新密码不一致";
                    }
                }
            });

            // submit(),参数是submit所在button的属性lay-filter的值
            form.on('submit(changePasswordSubmit)', function(data){
                let field = data.field;
                // field的属性为input的name属性值
                layer.alert(JSON.stringify(field), {title:'修改密码成功'}, function() {
                    // 表示已经在服务端更新成功，在浏览器中存储一个标记值
                    layui.sessionData('changePassword', {key: 'isOk', value: true});
                    // 关闭窗口
                    let index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                });
                return false;
            });
        });
    </script>
</head>
<body>
<form lay-filter="changePasswordForm" class="layui-form"
      action="" style="padding: 20px 50px 20px 20px">
    <div class="layui-form-item">
        <label class="layui-form-label">
            原密码<span style="color: red">*</span>
        </label>
        <div class="layui-input-inline">
            <!-- type改成password -->
            <input type="password" name="oldPassword"
                   lay-verify="required|checkPassword" lay-affix="eye"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">
            新密码<span style="color: red">*</span>
        </label>
        <div class="layui-input-inline">
            <!-- type改成password -->
            <input type="password" name="newPassword"
                   lay-verify="required|checkPassword|checkNewPassword"
                   lay-affix="eye" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">
            确认密码<span style="color: red">*</span>
        </label>
        <div class="layui-input-inline">
            <!-- type改成password -->
            <input type="password" name="confirmPassword"
                   lay-verify="required|checkPassword|confirmPassword"
                   lay-affix="eye" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn"
                    lay-submit lay-filter="changePasswordSubmit">
                立即提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">
                重置
            </button>
        </div>
    </div>
</form>
</body>
</html>